<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IT-Tools - 开发者必备的在线工具集合</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .serif {
            font-family: 'Noto Serif SC', serif;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .tool-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-bottom: 1rem;
        }
        .feature-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            margin-right: 1rem;
        }
        .mermaid {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="serif text-4xl md:text-5xl font-bold mb-6 leading-tight">IT-Tools <br>开发者必备的<span class="text-yellow-300">在线工具集合</span></h1>
                    <p class="text-xl mb-8 opacity-90">一个面向开发者、IT专业人员和技术爱好者的综合性在线工具集合，提供大量实用的开发和系统管理工具。</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="https://it-tools.tech/" target="_blank" class="bg-white text-indigo-600 hover:bg-gray-100 font-medium py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-external-link-alt mr-2"></i> 访问平台
                        </a>
                        <a href="#features" class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-600 font-medium py-3 px-6 rounded-lg transition duration-300 flex items-center justify-center">
                            <i class="fas fa-info-circle mr-2"></i> 了解更多
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="w-full h-full bg-white bg-opacity-20 rounded-2xl p-6 backdrop-filter backdrop-blur-sm border border-white border-opacity-20">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-code text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">编码/解码</p>
                                </div>
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-exchange-alt text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">格式转换</p>
                                </div>
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-lock text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">加密工具</p>
                                </div>
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-network-wired text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">网络工具</p>
                                </div>
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-keyboard text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">文本处理</p>
                                </div>
                                <div class="bg-white bg-opacity-80 rounded-xl p-4 text-center text-indigo-700">
                                    <i class="fas fa-calculator text-2xl mb-2"></i>
                                    <p class="text-sm font-medium">计算工具</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Features -->
    <section id="features" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="serif text-3xl md:text-4xl font-bold mb-4">为什么选择 IT-Tools?</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">一个开源、免费、无广告的一站式开发者工具平台，简化您的工作流程</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-indigo-100 text-indigo-600">
                        <i class="fas fa-tools text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">多样化工具集</h3>
                    <p class="text-gray-600">包含编码、解码、加密、数据转换、格式化等多种实用工具，满足开发者的各种需求。</p>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-purple-100 text-purple-600">
                        <i class="fas fa-th text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">一站式解决方案</h3>
                    <p class="text-gray-600">将分散的各类工具整合在一个平台，避免在多个网站间切换，提高工作效率。</p>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-green-100 text-green-600">
                        <i class="fab fa-github text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">开源免费</h3>
                    <p class="text-gray-600">完全开源的项目，可以自由使用和贡献。社区驱动，持续更新和改进。</p>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-blue-100 text-blue-600">
                        <i class="fas fa-wifi-slash text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">离线支持</h3>
                    <p class="text-gray-600">许多工具支持离线使用，保护敏感数据安全，无需担心信息泄露。</p>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-yellow-100 text-yellow-600">
                        <i class="fas fa-ad text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">无广告干扰</h3>
                    <p class="text-gray-600">纯净的使用体验，没有弹窗和广告干扰，让您专注于工作本身。</p>
                </div>
                
                <div class="bg-gray-50 rounded-2xl p-8 card-hover">
                    <div class="tool-icon bg-red-100 text-red-600">
                        <i class="fas fa-mobile-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">响应式设计</h3>
                    <p class="text-gray-600">适配各种设备屏幕，从桌面到移动设备均可流畅使用，随时随地解决问题。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Tool Categories -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="serif text-3xl md:text-4xl font-bold mb-4">丰富的工具类别</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">IT-Tools 包含多种实用工具类别，覆盖开发工作的各个方面</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-indigo-100 text-indigo-600">
                            <i class="fas fa-code"></i>
                        </div>
                        <span>编码/解码工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-indigo-500 mr-2"></i> Base64 编解码
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-indigo-500 mr-2"></i> URL 编解码
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-indigo-500 mr-2"></i> HTML 编解码
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-indigo-500 mr-2"></i> JWT 解码
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-purple-100 text-purple-600">
                            <i class="fas fa-exchange-alt"></i>
                        </div>
                        <span>转换工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-purple-500 mr-2"></i> JSON 转换
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-purple-500 mr-2"></i> YAML 转换
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-purple-500 mr-2"></i> XML 转换
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-purple-500 mr-2"></i> CSV 转换
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-blue-100 text-blue-600">
                            <i class="fas fa-keyboard"></i>
                        </div>
                        <span>格式化工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-blue-500 mr-2"></i> 代码格式化
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-blue-500 mr-2"></i> SQL 美化
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-blue-500 mr-2"></i> JSON 美化
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-blue-500 mr-2"></i> XML 格式化
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-green-100 text-green-600">
                            <i class="fas fa-random"></i>
                        </div>
                        <span>生成工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i> UUID 生成
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i> 密码生成
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i> 测试数据生成
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-green-500 mr-2"></i> 二维码生成
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-yellow-100 text-yellow-600">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <span>计算工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-yellow-500 mr-2"></i> 哈希计算
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-yellow-500 mr-2"></i> CIDR 计算
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-yellow-500 mr-2"></i> 时间戳转换
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-yellow-500 mr-2"></i> 进制转换
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-2xl p-8 shadow-sm">
                    <h3 class="text-xl font-bold mb-6 pb-4 border-b border-gray-200 flex items-center">
                        <div class="feature-icon bg-red-100 text-red-600">
                            <i class="fas fa-network-wired"></i>
                        </div>
                        <span>网络工具</span>
                    </h3>
                    <ul class="grid grid-cols-2 gap-4">
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-red-500 mr-2"></i> IP 查询
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-red-500 mr-2"></i> DNS 查询
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-red-500 mr-2"></i> 端口扫描
                        </li>
                        <li class="flex items-center text-gray-700">
                            <i class="fas fa-check-circle text-red-500 mr-2"></i> HTTP 头分析
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="serif text-3xl md:text-4xl font-bold mb-4">适用场景</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">IT-Tools 能满足不同技术角色的多样化需求</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-6 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 text-3xl">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">开发人员</h3>
                    <p class="text-gray-600">快速处理数据格式转换，调试API响应，生成测试数据等日常开发任务。</p>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 text-3xl">
                        <i class="fas fa-server"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">系统管理员</h3>
                    <p class="text-gray-600">进行网络配置和故障排除，计算子网掩码，分析日志数据等系统管理工作。</p>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 text-3xl">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">安全专业人员</h3>
                    <p class="text-gray-600">测试加密和哈希算法，解码JWT令牌，分析网络流量等安全相关工作。</p>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-3xl">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">数据分析师</h3>
                    <p class="text-gray-600">处理和转换数据格式，生成模拟数据，验证正则表达式等数据分析任务。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="text-center mb-16">
                <h2 class="serif text-3xl md:text-4xl font-bold mb-4">IT-Tools 生态系统</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">了解 IT-Tools 如何连接不同技术角色和工具类别</p>
            </div>
            
            <div class="mermaid">
                graph TD
                    A[IT-Tools] --> B[开发者]
                    A --> C[系统管理员]
                    A --> D[安全专家]
                    A --> E[数据分析师]
                    
                    B --> F[编码/解码工具]
                    B --> G[格式化工具]
                    B --> H[生成工具]
                    
                    C --> I[网络工具]
                    C --> J[计算工具]
                    C --> K[文本处理]
                    
                    D --> L[加密工具]
                    D --> M[哈希计算]
                    D --> N[安全分析]
                    
                    E --> O[数据转换]
                    E --> P[测试数据]
                    E --> Q[正则表达式]
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-16 px-4 md:px-0 bg-indigo-600 text-white">
        <div class="container mx-auto max-w-4xl px-4 text-center">
            <h2 class="serif text-3xl md:text-4xl font-bold mb-6">立即体验 IT-Tools</h2>
            <p class="text-xl mb-8 opacity-90">开源免费的一站式开发者工具平台，简化您的工作流程，提高开发效率。</p>
            <a href="https://it-tools.tech/" target="_blank" class="inline-block bg-white text-indigo-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-lg transition duration-300">
                <i class="fas fa-external-link-alt mr-2"></i> 访问平台
            </a>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-400 py-12 px-4">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-white text-xl font-bold mb-2">技术小馆</h3>
                    <a href="http://www.yuque.com/jtostring" target="_blank" class="text-gray-400 hover:text-white transition duration-300">
                        <i class="fas fa-link mr-2"></i> http://www.yuque.com/jtostring
                    </a>
                </div>
                <div class="flex space-x-6">
                    <a href="https://github.com/CorentinTh/it-tools" target="_blank" class="text-gray-400 hover:text-white text-2xl transition duration-300">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="https://it-tools.tech/" target="_blank" class="text-gray-400 hover:text-white text-2xl transition duration-300">
                        <i class="fas fa-external-link-alt"></i>
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
                <p>© 2023 IT-Tools. 一个开源免费的开发者工具集合。</p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>